<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vuex学习</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="极客园-开发文档">
    
    <link rel="preload" href="/document/assets/css/0.styles.c9fde802.css" as="style"><link rel="preload" href="/document/assets/js/app.9911b446.js" as="script"><link rel="preload" href="/document/assets/js/3.5cec4c48.js" as="script"><link rel="preload" href="/document/assets/js/6.015274ee.js" as="script"><link rel="prefetch" href="/document/assets/js/1.bb7b219c.js"><link rel="prefetch" href="/document/assets/js/10.5de95cfc.js"><link rel="prefetch" href="/document/assets/js/11.a0e28b35.js"><link rel="prefetch" href="/document/assets/js/4.9359f99f.js"><link rel="prefetch" href="/document/assets/js/5.3db35feb.js"><link rel="prefetch" href="/document/assets/js/7.6b4f86a1.js"><link rel="prefetch" href="/document/assets/js/8.4cafca16.js"><link rel="prefetch" href="/document/assets/js/9.e310b536.js">
    <link rel="stylesheet" href="/document/assets/css/0.styles.c9fde802.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/document/" class="home-link router-link-active"><img src="/document/hero.png" alt="" class="logo"> <!----></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/document/guide/01-pc.html" class="nav-link">
  PC端项目
</a></div><div class="nav-item"><a href="/document/guide/02-vuex.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Vuex学习
</a></div><div class="nav-item"><a href="/document/guide/03-mobile.html" class="nav-link">
  M端项目
</a></div> <a href="https://gitee.com/zhoushugang/" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/document/guide/01-pc.html" class="nav-link">
  PC端项目
</a></div><div class="nav-item"><a href="/document/guide/02-vuex.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Vuex学习
</a></div><div class="nav-item"><a href="/document/guide/03-mobile.html" class="nav-link">
  M端项目
</a></div> <a href="https://gitee.com/zhoushugang/" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Vuex学习</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/document/guide/02-vuex.html#vuex学习" class="sidebar-link">Vuex学习</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_00-事件总线" class="sidebar-link">00-事件总线</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_01-vuex介绍" class="sidebar-link">01-vuex介绍</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_02-vuex使用" class="sidebar-link">02-vuex使用</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_03-vuex的state" class="sidebar-link">03-vuex的state</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_04-vuex的mutations" class="sidebar-link">04-vuex的mutations</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_05-vuex的actions" class="sidebar-link">05-vuex的actions</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_06-vuex的getters" class="sidebar-link">06-vuex的getters</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_07-vuex的modules" class="sidebar-link">07-vuex的modules</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_08-vuex案例-准备代码" class="sidebar-link">08-vuex案例-准备代码</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_08-vuex案例-准备接口" class="sidebar-link">08-vuex案例-准备接口</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_09-vuex案例-配置安装vuex" class="sidebar-link">09-vuex案例-配置安装vuex</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_09-vuex案例-新建cart模块" class="sidebar-link">09-vuex案例-新建cart模块</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_10-vuex案例-渲染列表" class="sidebar-link">10-vuex案例-渲染列表</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_11-vuex案例-计算总件数和总价" class="sidebar-link">11-vuex案例-计算总件数和总价</a></li><li class="sidebar-sub-header"><a href="/document/guide/02-vuex.html#_12-vuex案例-修改数量" class="sidebar-link">12-vuex案例-修改数量</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="vuex学习"><a href="#vuex学习" class="header-anchor">#</a> Vuex学习</h2> <h3 id="_00-事件总线"><a href="#_00-事件总线" class="header-anchor">#</a> 00-事件总线</h3> <blockquote><p>目的：掌握非父子组件之间数据通讯</p></blockquote> <p>首先：明确一件事件，组件的自定义事件，只能由组件自己来触发。</p> <p>然后：假设A组件想传值给B组件，AB组件的非父子。<strong>其实也是依赖自定义事件来传递</strong>。</p> <ul><li>在A组件触发一个自定义事件（myEvent），触发的时候可以传参，参数可以是A组件数据</li> <li>在B组件触发绑定自定义事件（myEvent），事件的函数接收传参，参数其实是A组件数据</li> <li>触发事件和绑定事件由另外一个组件负责，A导入它触发事件，B导入它绑定事件，满足自定义事件触发绑定条件。</li> <li>另外一个组件：我们称为 <code>事件总线</code> 或者 <code>eventBus</code></li></ul> <p>画图：</p> <p><img src="/document/assets/img/1626422307619.ff343efc.png" alt="1626422307619"></p> <p>代码：</p> <p><code>eventBus.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p><code>com-a.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>A组件 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toB<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>传递数据给B组件<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> eventBus <span class="token keyword">from</span> <span class="token string">'./eventBus.js'</span>    
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ComA'</span><span class="token punctuation">,</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      count<span class="token operator">:</span> <span class="token number">911</span>  
    <span class="token punctuation">}</span>  
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">toB</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      eventBus<span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'myEvent'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count<span class="token punctuation">)</span>  
    <span class="token punctuation">}</span>  
  <span class="token punctuation">}</span>  
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><code>com-b.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>B组件 {{myCount}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> eventBus <span class="token keyword">from</span> <span class="token string">'./eventBus.js'</span>    
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ComA'</span><span class="token punctuation">,</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      myCount<span class="token operator">:</span> <span class="token keyword">null</span>  
    <span class="token punctuation">}</span>  
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    eventBus<span class="token punctuation">.</span><span class="token function">$on</span><span class="token punctuation">(</span><span class="token string">'myEvent'</span><span class="token punctuation">,</span> <span class="token parameter">data</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>myCount <span class="token operator">=</span> data  
    <span class="token punctuation">}</span><span class="token punctuation">)</span>  
  <span class="token punctuation">}</span> 
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong>总结：</strong>  事件总线eventBus就是一个对象，提供事件绑定和事件触发功能，其他组件使用这个eventBus进行事件绑定和事件触发进行传参，可以解决非父子组件传值问题。</p> <h3 id="_01-vuex介绍"><a href="#_01-vuex介绍" class="header-anchor">#</a> 01-vuex介绍</h3> <blockquote><p>目的：记住vuex的核心概念：state mutations actions</p></blockquote> <p>Vuex 是一个专为 Vue.js 应用程序开发的<strong>状态管理模式</strong>。它采用集中式存储管理应用的所有组件的状态，并以相应的<strong>规则</strong>保证状态以一种可预测的方式发生变化。</p> <p><font color="red">我们理解：</font></p> <ul><li>vuex是采用集中式管理组件依赖的共享数据的一个工具vue插件，可以解决不同组件数据共享问题。</li></ul> <p><img src="" alt="vuex"></p> <p><font color="red">看图结论：</font></p> <ul><li>state 管理数据，管理的数据是响应式的，当数据改变时驱动视图更新。</li> <li>mutations 更新数据，state中的数据只能使用mutations去改变数据。</li> <li>actions 请求数据，响应成功后把数据提交给mutations</li></ul> <p><img src="/document/assets/img/1573542431789.cfad9b9b.png" alt="1573542431789"></p> <h3 id="_02-vuex使用"><a href="#_02-vuex使用" class="header-anchor">#</a> 02-vuex使用</h3> <blockquote><p>目的：掌握vuex基本步骤</p></blockquote> <p>具体步骤：</p> <ul><li>第一步：<code>npm i vuex --save</code></li> <li>第二步： 创建store/index.js  <code>import Vuex from 'vuex'</code> <code>import vue from 'vue'</code></li> <li>第三步：<code>Vue.use(Vuex)</code></li> <li>第四步：<code>const store = new Vuex.Store({...配置项})</code></li> <li>第五步：导出 <code>export default store</code></li> <li>第六步：导入main.js 在根实例配置 store 选项指向 store 实例对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 初始化一个vuex的实例（数据仓库） 导出即可</span>
<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">'vuex'</span>
<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>

<span class="token comment">// 使用安装</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>

<span class="token comment">// 初始化</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 配置（state|mutations|actions）</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> store
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import store from '@/store'
</span></span>
new Vue({
<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  store,
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> render: h =&gt; h(App),
</span></span>}).$mount('#app')
</code></pre></div><p><strong>总结：</strong> 和vue-router的使用方式一样。初始化 <code>new Vuex.Store()</code></p> <h3 id="_03-vuex的state"><a href="#_03-vuex的state" class="header-anchor">#</a> 03-vuex的state</h3> <blockquote><p>目的：掌握在vuex中如何定义数据，在组件中如何使用数据。</p></blockquote> <p>大致内容：</p> <ul><li>定义数据</li> <li>使用数据
<ul><li>通过this直接使用</li> <li>computed选项中使用</li> <li>mapState辅助函数使用</li></ul></li></ul> <p>落地代码：</p> <ul><li>定义数据</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 初始化vuex对象</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  state<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 管理数据</span>
    count<span class="token operator">:</span> <span class="token number">0</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>使用数据</li></ul> <p>通过this直接使用</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>A组件 state的数据：{{$store.state.count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>computed选项中使用</p> <div class="language-js extra-class"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">count</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>count
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>A组件 state的数据：{{count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>mapState辅助函数使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>mapState <span class="token punctuation">}</span> <span class="token keyword">from</span> vuex
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'count'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>A组件 state的数据：{{count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_04-vuex的mutations"><a href="#_04-vuex的mutations" class="header-anchor">#</a> 04-vuex的mutations</h3> <blockquote><p>目的：知道定义mutations函数修改vuex中的数据</p></blockquote> <p>大致内容：</p> <ul><li>定义mutations函数</li> <li>使用mutations函数
<ul><li>通过this直接使用</li> <li>mapMutations辅助函数使用</li></ul></li></ul> <p>落地代码：</p> <ul><li>定义mutations函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  state<span class="token operator">:</span> <span class="token punctuation">{</span>
    count<span class="token operator">:</span> <span class="token number">0</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  mutations<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 修改数据的函数  </span>
    <span class="token function">add</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      state<span class="token punctuation">.</span>count <span class="token operator">++</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 带参数修改数据的函数</span>
    <span class="token function">add2</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> payload</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// payload 是传参的意思</span>
      state<span class="token punctuation">.</span>count <span class="token operator">+=</span> payload  
    <span class="token punctuation">}</span>  
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>使用mutations函数</li></ul> <p>通过this直接使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'add'</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'add2'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span>
</code></pre></div><p>mapMutations辅助函数使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>mapMutations <span class="token punctuation">}</span> <span class="token keyword">from</span> vuex
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>methods<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'add'</span><span class="token punctuation">,</span><span class="token string">'add2'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>    
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>add<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>累加1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>add2(10)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>累加10<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_05-vuex的actions"><a href="#_05-vuex的actions" class="header-anchor">#</a> 05-vuex的actions</h3> <blockquote><p>目的：知道定义actions函数获取数据</p></blockquote> <p>大致内容：</p> <ul><li>定义actions函数</li> <li>使用actions函数
<ul><li>通过this直接使用</li> <li>mapActions辅助函数使用</li></ul></li></ul> <p>落地代码：</p> <ul><li>定义actions函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>actions<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token comment">// 异步获取数据  </span>
  <span class="token function">getData</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> payload</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ctx 是vuex的执行上下文，理解成this  </span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	  <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token number">100</span>
      <span class="token comment">// 通过mutations修改数据</span>
      ctx<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'add2'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>使用actions函数</li></ul> <p>通过this直接使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'getData'</span><span class="token punctuation">)</span>
</code></pre></div><p>mapActions辅助函数使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>mapActions <span class="token punctuation">}</span> <span class="token keyword">from</span> vuex
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>methods<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'getData'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getData<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_06-vuex的getters"><a href="#_06-vuex的getters" class="header-anchor">#</a> 06-vuex的getters</h3> <blockquote><p>目的：知道如何在vuex中定义计算属性getters</p></blockquote> <p>大致内容：</p> <ul><li>定义getters数据（理解成vuex中的计算属性）</li> <li>使用getters数据
<ul><li>通过this直接使用</li> <li>computed中使用</li> <li>mapGetters辅助函数使用</li></ul></li></ul> <p>落地代码：</p> <ul><li>定义getters数据</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>state<span class="token operator">:</span> <span class="token punctuation">{</span>
  count<span class="token operator">:</span> <span class="token number">10</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 基于state得到一个新数据</span>
getters<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token function">cubeCount</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span>  
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>    
</code></pre></div><ul><li>使用getters数据</li></ul> <p>通过this直接使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>cubeCount
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{$store.getters.cubeCount}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>computed中使用</p> <div class="language-js extra-class"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token function">cubeCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>cubeCount
  <span class="token punctuation">}</span>  
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{cubeCount}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>mapGetters辅助函数使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>mapGetters <span class="token punctuation">}</span> <span class="token keyword">from</span> vuex
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'cubeCount'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> 
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{cubeCount}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_07-vuex的modules"><a href="#_07-vuex的modules" class="header-anchor">#</a> 07-vuex的modules</h3> <blockquote><p>目的：掌握vuex中分模块的写法，modules配置选项的使用。</p></blockquote> <p>在<code>new Vuex.Store({})</code> 的配置对象中数据函数越来越多不利于维护，vuex给我们提供了 <code>modules</code> 选项来拆分模块。</p> <p>大致内容：</p> <ul><li>定义模块</li> <li>注册模块</li> <li>使用模块的：state，getters，mutations，actions 会有问题</li> <li><strong>建议</strong>使用带命名空间的模块的：state，getters，mutations，actions</li></ul> <p>落地代码：</p> <ul><li>定义模块, 注册模块</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">'vuex'</span>
<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>

<span class="token comment">// A模块</span>
<span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 开启命名空间：让你的state mutations getters actions 完全分割</span>
  namespaced<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 避免数据污染，模块中state建议写成函数</span>
  <span class="token function">state</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      count<span class="token operator">:</span> <span class="token number">100</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  getters<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">cubeCount</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  mutations<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">add</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  actions<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">getData</span> <span class="token punctuation">(</span><span class="token parameter">ctx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 获取数据成功</span>
        ctx<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'add'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// mutations getters actions</span>
<span class="token punctuation">}</span>
<span class="token comment">// B模块</span>
<span class="token keyword">const</span> moduleB <span class="token operator">=</span> <span class="token punctuation">{</span>
  namespaced<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 避免数据污染，模块中state建议写成函数</span>
  <span class="token function">state</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      count<span class="token operator">:</span> <span class="token number">10000</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  mutations<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">add</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      state<span class="token punctuation">.</span>count <span class="token operator">+=</span> <span class="token number">100</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// mutations getters actions</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// state mutations actions getters</span>
  <span class="token comment">// 不建议直接这里定义</span>
  <span class="token comment">// 建议再 modules 配置选项定义模块</span>
  modules<span class="token operator">:</span> <span class="token punctuation">{</span>
    a<span class="token operator">:</span> moduleA<span class="token punctuation">,</span>
    b<span class="token operator">:</span> moduleB
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> store

</code></pre></div><ul><li>使用带<strong>命名空间</strong>的模块的：state，getters，mutations，actions</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>com-a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    A组件 {{$store.state.a.count}} {{count}}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$store.commit(<span class="token punctuation">'</span>a/add<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>累计1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>add<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>累计1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$store.dispatch(<span class="token punctuation">'</span>a/getData<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>发请求获取数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getData<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>发请求获取数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
    {{$store.getters['a/cubeCount']}} ---- {{cubeCount}}
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> mapState<span class="token punctuation">,</span> mapMutations<span class="token punctuation">,</span> mapActions<span class="token punctuation">,</span> mapGetters <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ComA'</span><span class="token punctuation">,</span>
  computed<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 'a' 模块名称  ['count'] 模块中的state数据名称</span>
    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'count'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'cubeCount'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 定义了add函数调用 this.$store.commit('a/add')</span>
    <span class="token operator">...</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'add'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token comment">// 定义了getData函数调用 this.$store.dispatch('a/getData')</span>
    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'getData'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><p>需要带上模块名称 <code>模块名称/函数名称</code>  使用辅助函数 <code>(模块名称,[函数名称,...])</code></p> <p>小结一下：</p> <ul><li>建议使用模块都带上命名控件，这样分割的更彻底，更好维护。</li></ul> <h3 id="_08-vuex案例-准备代码"><a href="#_08-vuex案例-准备代码" class="header-anchor">#</a> 08-vuex案例-准备代码</h3> <blockquote><p>目的：准备案例基础代码（克隆仓库）</p></blockquote> <p>大致步骤：</p> <ul><li>克隆仓库</li> <li>安装依赖</li> <li>启动案例</li> <li>了解结构</li></ul> <p>落地内容：</p> <ul><li>克隆仓库</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> clone https://gitee.com/zhoushugang/vuex-cart-demo.git
</code></pre></div><ul><li>安装依赖</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> vuex-cart-demo
<span class="token function">npm</span> i
</code></pre></div><ul><li>启动案例</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> run serve
</code></pre></div><ul><li>了解结构</li></ul> <p><img src="" alt="1625798110275"></p> <h3 id="_08-vuex案例-准备接口"><a href="#_08-vuex案例-准备接口" class="header-anchor">#</a> 08-vuex案例-准备接口</h3> <blockquote><p>目的：准备后台接口（json-server）</p></blockquote> <p>大致步骤：</p> <ul><li>安装工具</li> <li>初始数据</li> <li>启动接口</li> <li>测试接口</li></ul> <p>落地内容：</p> <ul><li>安装工具</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>npm i json<span class="token operator">-</span>server <span class="token operator">-</span>g
</code></pre></div><ul><li>初始化数据</li></ul> <p>新建一个目录 <code>json-server</code>  目录名称自定义，进入目录新建文件 <code>db.json</code></p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;cart&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token number">100001</span><span class="token punctuation">,</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;低帮城市休闲户外鞋天然牛皮COOLMAX纤维&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;price&quot;</span><span class="token operator">:</span> <span class="token number">128</span><span class="token punctuation">,</span>
      <span class="token property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
      <span class="token property">&quot;thumb&quot;</span><span class="token operator">:</span> <span class="token string">&quot;https://yanxuan-item.nosdn.127.net/3a56a913e687dc2279473e325ea770a9.jpg&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token number">100002</span><span class="token punctuation">,</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;网易味央黑猪猪肘330g*1袋&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;price&quot;</span><span class="token operator">:</span> <span class="token number">39</span><span class="token punctuation">,</span>
      <span class="token property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
      <span class="token property">&quot;thumb&quot;</span><span class="token operator">:</span> <span class="token string">&quot;https://yanxuan-item.nosdn.127.net/d0a56474a8443cf6abd5afc539aa2476.jpg&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token number">100003</span><span class="token punctuation">,</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;KENROLL男女简洁多彩一片式室外拖&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;price&quot;</span><span class="token operator">:</span> <span class="token number">128</span><span class="token punctuation">,</span>
      <span class="token property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
      <span class="token property">&quot;thumb&quot;</span><span class="token operator">:</span> <span class="token string">&quot;https://yanxuan-item.nosdn.127.net/eb1556fcc59e2fd98d9b0bc201dd4409.jpg&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>启动接口</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>json-server db.json
</code></pre></div><ul><li>测试接口 https://getman.cn/ 一个在线工具（和postman一样）</li></ul> <p><img src="/document/assets/img/1625799163613.10bac764.png" alt="1625799163613"></p> <h3 id="_09-vuex案例-配置安装vuex"><a href="#_09-vuex案例-配置安装vuex" class="header-anchor">#</a> 09-vuex案例-配置安装vuex</h3> <blockquote><p>目的：安装并且配置vuex的store代码</p></blockquote> <p>具体步骤：</p> <ul><li>安装 vuex</li> <li>新建vuex模块，创建store实例</li> <li>main.js使用store实例</li></ul> <p>落地内容：</p> <ol><li><p>运行如下的命令安装 vuex：</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> i vuex@3.6.2 -S
</code></pre></div></li> <li><p>在 <code>src</code> 目录下新建 <code>store</code> 文件夹，并在 <code>src/store</code> 目录下新建 <code>index.js</code> 模块：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">'vuex'</span>

<span class="token comment">// 1. 把 Vuex 安装为 Vue 的插件</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>

<span class="token comment">// 2. 创建 store 实例</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 注册模块</span>
  modules<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 3. 向外共享 store 实例</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> store
</code></pre></div></li> <li><p>在 <code>main.js</code> 入口文件中，导入并挂载 store 模块：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span>
<span class="token comment">// 1. 导入 store 模块</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'@/store/index'</span>

Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span>

<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token comment">// 2. 挂载 store</span>
  store<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</code></pre></div></li></ol> <h3 id="_09-vuex案例-新建cart模块"><a href="#_09-vuex案例-新建cart模块" class="header-anchor">#</a> 09-vuex案例-新建cart模块</h3> <blockquote><p>目的：创建配置cart的vuex数据模块</p></blockquote> <p>大致步骤：</p> <ul><li>新建模块文件，基本配置</li> <li>在仓库注册模块</li></ul> <p>落地内容：</p> <ol><li><p>在 <code>@/store/</code> 目录下新建 <code>cart.js</code> 购物车模块：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1. 定义购物车模块</span>
<span class="token keyword">const</span> moduleCart <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 1.1 开启命名空间</span>
  namespaced<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 1.2 数据</span>
  <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 2. 向外共享购物车模块</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> moduleCart

</code></pre></div></li> <li><p>在 <code>@/store/index.js</code> 模块中，导入并注册购物车模块：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">'vuex'</span>
<span class="token comment">// 1. 导入购物车模块</span>
<span class="token keyword">import</span> moduleCart <span class="token keyword">from</span> <span class="token string">'./cart'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>

<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  modules<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 2. 注册购物车模块</span>
    cart<span class="token operator">:</span> moduleCart<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> store
</code></pre></div></li></ol> <h3 id="_10-vuex案例-渲染列表"><a href="#_10-vuex案例-渲染列表" class="header-anchor">#</a> 10-vuex案例-渲染列表</h3> <blockquote><p>目的：使用vuex处理商品列表数据</p></blockquote> <p>大致步骤：</p> <ul><li>安装下axios</li> <li>vuex中state定义购物车商品列表数据</li> <li>定义修改商品列表数据的mutations函数</li> <li>定义获取商品列表数据的actions函数，获取后调用mutations函数进行修改</li> <li>在 app.vue 组件初始化调用actions获取数据，组件进行渲染</li></ul> <p>落地代码：</p> <ul><li>安装axios</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> i axios
</code></pre></div><ul><li>定义商品列表数据</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleCart <span class="token operator">=</span> <span class="token punctuation">{</span>
  namespaced<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
      list<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>定义修改商品列表mutations函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>mutataions<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">updateList</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> payload</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        state<span class="token punctuation">.</span>list <span class="token operator">=</span> payload
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>定义获取商品列表actions函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>actions<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">getList</span> <span class="token punctuation">(</span><span class="token parameter">ctx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/cart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
          ctx<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'updateList'</span><span class="token punctuation">,</span> res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>  
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>在App组件获取数据，进行渲染</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> mapState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&quot;App&quot;</span><span class="token punctuation">,</span>
  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'cart/getList'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  computed<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'cart'</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">'list'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code>    <span class="token comment">&lt;!-- 商品 Item 项组件 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>es-goods</span>
      <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in list<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.id<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.id<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.name<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:thumb</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.thumb<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:price</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.price<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.count<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>es-goods</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_11-vuex案例-计算总件数和总价"><a href="#_11-vuex案例-计算总件数和总价" class="header-anchor">#</a> 11-vuex案例-计算总件数和总价</h3> <blockquote><p>目的：渲染页面上的 件数总和，和总价格。</p></blockquote> <p>大致步骤：</p> <ul><li>在vuex中使用getters计算件数和价格</li> <li>在App.vue 使用数据</li></ul> <p>落地代码：</p> <ul><li>在vuex中使用getters计算件数和价格</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>  getters<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">total</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> state<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p<span class="token punctuation">,</span>c</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span>p<span class="token operator">+</span>c<span class="token punctuation">.</span>count<span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">amount</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> state<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p<span class="token punctuation">,</span>c</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span>p<span class="token operator">+</span>c<span class="token punctuation">.</span>count<span class="token operator">*</span>c<span class="token punctuation">.</span>price<span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><ul><li>在App.vue 使用数据</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token deleted-arrow deleted"><span class="token prefix deleted">&lt;</span><span class="token line">template&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;div class=&quot;footer-container&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">   &lt;!-- 中间的合计 --&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">   &lt;div&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      &lt;span&gt;共 {{total}} 件商品，合计：&lt;/span&gt;
</span><span class="token prefix inserted">+</span><span class="token line">      &lt;span class=&quot;price&quot;&gt;￥{{amount}}&lt;/span&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   &lt;/div&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">   &lt;!-- 右侧结算按钮 --&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">   &lt;button class=&quot;btn btn-success btn-settle&quot;&gt;结算&lt;/button&gt;
</span><span class="token prefix unchanged"> </span><span class="token line"> &lt;/div&gt;
</span></span><span class="token deleted-arrow deleted"><span class="token prefix deleted">&lt;</span><span class="token line">/template&gt;
</span></span>
<span class="token deleted-arrow deleted"><span class="token prefix deleted">&lt;</span><span class="token line">script&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { mapGetters } from 'vuex'
</span></span>export default {
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> name: 'EsFooter',
</span><span class="token prefix unchanged"> </span><span class="token line"> computed: {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    ...mapGetters('cart', ['total','amount'])
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> }
</span></span>}
<span class="token deleted-arrow deleted"><span class="token prefix deleted">&lt;</span><span class="token line">/script&gt;
</span></span></code></pre></div><h3 id="_12-vuex案例-修改数量"><a href="#_12-vuex案例-修改数量" class="header-anchor">#</a> 12-vuex案例-修改数量</h3> <blockquote><p>目的：完成修改商品数量功能</p></blockquote> <p>大致步骤：</p> <ul><li>定义修改数量的mutations函数</li> <li>定义修改数量的actions函数</li> <li>Goods组件中修改数量的时候调用actions函数</li></ul> <p>落地代码：</p> <ul><li>定义修改数量的mutations函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">updateCount</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> payload</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> goods <span class="token operator">=</span> state<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token operator">=&gt;</span>item<span class="token punctuation">.</span>id <span class="token operator">===</span> payload<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
      goods<span class="token punctuation">.</span>count <span class="token operator">=</span> payload<span class="token punctuation">.</span>count
    <span class="token punctuation">}</span>
</code></pre></div><ul><li>定义修改数量的actions函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">updateCount</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> payload</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      axios<span class="token punctuation">.</span><span class="token function">patch</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/cart/'</span><span class="token operator">+</span>payload<span class="token punctuation">.</span>id<span class="token punctuation">,</span><span class="token punctuation">{</span>
        count<span class="token operator">:</span> payload<span class="token punctuation">.</span>count
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        ctx<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'updateCount'</span><span class="token punctuation">,</span> payload<span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre></div><ul><li>Goods组件中修改数量的时候调用actions函数</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code>          <span class="token comment">&lt;!-- 按钮区域 --&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn btn-light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onBtnClick(-1)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>count<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn btn-light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onBtnClick(1)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">onBtnClick</span> <span class="token punctuation">(</span><span class="token parameter">step</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> newCount <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">+</span> step
      <span class="token keyword">if</span> <span class="token punctuation">(</span>newCount <span class="token operator">&lt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
      <span class="token comment">// 发送修改数量请求</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'cart/updateCount'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>id<span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">,</span>count<span class="token operator">:</span> newCount<span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/document/assets/js/app.9911b446.js" defer></script><script src="/document/assets/js/3.5cec4c48.js" defer></script><script src="/document/assets/js/6.015274ee.js" defer></script>
  </body>
</html>
